<template>
	<view class="page-wrap" :class="{'padding-top':!noticeList||(noticeList&&noticeList.length===0)}">
		<u-notice-bar mode="horizontal" :list="noticeList" class="text-white">
		</u-notice-bar>
		<view class="share-guide" v-if="onshare">
			<button type="primary" class="cu-btn bg-blue" @click="changeOnshare">知道了</button>
		</view>
		<view class="">
			<view class="top-bg">
			</view>
			<view class="join-number">
				<text v-if="total">
					已参与
					<text class="number">{{total}}</text>人次
				</text>
			</view>
			<view class="e-charts">
				<view :prop="ecOption" id="echarts" class="e-charts">
				</view>
			</view>
			<view class="text-center" style="position: relative;z-index: 11;"
				v-if="selectedCompany&&selectedCompany.org_name">
				<view class="text-yellow bottom-tip" @click="showModal('orgModal')">
					<view class="text-bold text-center margin-left-xs margin-right-xs text-lg  "
						style="margin-bottom: 10rpx;">{{selectedCompany.org_name}}</view>
					<view class="">
						<text class="margin-right-xs">已有{{orgJoinNum}}人次参与</text>
						<button class="cu-btn lines-yellow "> 接力送祝福</button>
					</view>
				</view>
			</view>
			<view class="foot-button" style="display: flex;">
				<view class="button" :class="{'less-bottom':selectedCompany&&selectedCompany.org_name}"
					@click.stop="showModal('editInfo')" v-if="wxUserInfo&&wxUserInfo.unionid">
				</view>
				<view class="button share-btn">
					<button class="cu-btn round  line-white" @click="changeOnshare" open-type="share"><text
							class="cuIcon-share"></text></button>
				</view>
			</view>

			<timeline-list :profile="wxUserInfo.headimgurl" v-if="wxUserInfo&&wxUserInfo.user_no"
				activityNo="AT2106110001" showMore :limit="3"></timeline-list>


			<view class="cu-modal bottom-modal" @click="hideModal" :class="{show:modalName==='editInfo'}">
				<view class="cu-dialog" @click.stop="">
					<view class="edit-info">
						<view class="form-item">
							<view class="single-row">
								<text class="margin-right-xs">代表</text>
								<view class="radio-button" :class="{active:item===typeRadio}" v-for="item in radioList"
									:key="item" :name="item" @click="changeTypeRadio(item)">
									{{item}}
								</view>
								<text>参加活动</text>
							</view>
						</view>
						<view class="form-item" v-if="typeRadio==='为家乡'||typeRadio==='家乡'||typeRadio==='所在地'">
							<view class="label">
								<text class="text-red">*</text> {{typeRadio==='家乡'?`选择家乡节点`:'选择所在地区'}}
							</view>
							<view class="">
								<view class="form-input" @click="showModal('areaSelector')">
									<text class="text" v-if="typeRadio==='所在地'">
										{{selectArea.name_path||'点击选择您所在的地区'}}
									</text>
									<text class="text" v-if="typeRadio==='家乡'">
										{{selectHometown.name_path||'点击选择家乡所在地区'}}
									</text>
									<text class="cuIcon-close margin-left"
										v-if="typeRadio==='所在地' &&selectArea.name_path"
										@click.stop="clearAreaInfo"></text>
									<text class="cuIcon-close margin-left"
										v-if="typeRadio==='家乡' &&selectHometown.name_path"
										@click.stop="claerHomeInfo"></text>
								</view>
							</view>
						</view>
						<view class="form-item margin-tb-sm" v-if="typeRadio==='为单位'||typeRadio==='单位'">
							<view class="label ">
								输入单位名称
							</view>
							<view class="">
								<view class="form-input">
									<input type="text" class="text" v-model="org_name" placeholder="请输入单位名称"
										@input="onInputCompany" />
									<!-- <text class="cuIcon-close" v-if="org_name" @click.stop="clearAreaInfo"></text> -->
								</view>
							</view>
							<view class="company-list" v-if="companyList&&companyList.length>0">
								<view class="company-item text-blue" v-for="item in companyList" :key="item.id"
									@click="clickCompany(item)">
									{{item.org_name||''}}
								</view>
							</view>
							<view class="tips text-red" v-if="createOrgTips">
								{{createOrgTips||''}}
							</view>
							<view class="create-org text-orange" @click.stop="showModal('createOrg')"
								v-if="(companyList&&companyList.length==0)||(!this.selectedCompany.org_no)||this.selectedCompany.org_name!==org_name&&org_name">
								<text class="cuIcon-question margin-right-xs"></text> 未找到您所在的单位？单击此处创建！
							</view>
						</view>
						<view class="form-item">
							<view class="label">
								祝福语
							</view>
							<view class="text-area">
								<textarea class="content" maxlength="100" v-model="blessing"
									placeholder="说出你对党的祝福..." />
							</view>
						</view>
						<view class="button-box" v-if="wxUserInfo&&wxUserInfo.unionid">
							<button class="cu-btn bg-orange lg" :disabled="disabledButton"
								@click="presentFlower">点击送祝福</button>
						</view>
					</view>
				</view>
			</view>
			<view class="cu-modal bottom-modal" @click="hideModal" :class="{show:modalName=== 'createOrg'}">
				<view class="cu-dialog" @click.stop="" v-if="modalName=== 'createOrg'">
					<view class="form-view">
						<view class="cu-form-group ">
							<view class="title"><text class="text-red">*</text>单位名称</view>
							<input placeholder="单位名称" name="input" v-model="org_name"></input>
						</view>
						<view class="cu-form-group ">
							<view class="title"><text class="text-red">*</text>所在地区</view>
							<view class="form-input" @click="showModal('areaSelector')">
								<text class="text">
									{{selectOrgAddr.name_path||'点击选择单位所在的地区'}}
								</text>
								<text class="cuIcon-close margin-left" v-if="selectOrgAddr.name_path"
									@click.stop="clearOrgAddrInfo"></text>
							</view>
						</view>
						<view class="cu-form-group ">
							<view class="title"><text class="text-red">*</text>详细地址</view>
							<input placeholder="填写单位详细地址" name="input" v-model="org_addr"></input>
						</view>
						<view class="tips text-red">
							{{createOrgTips}}
						</view>
						<view class="button-box">
							<button type="primary" class="cu-btn bg-blue margin-right" @click="createOrg">确定</button>
							<button class="cu-btn bg-grey" @click.stop="showModal('editInfo')">取消</button>
						</view>
					</view>
				</view>
			</view>

			<view class="cu-modal bottom-modal" @click="hideModal" :class="{show:modalName=== 'orgModal'}">
				<view class="cu-dialog" @click.stop="">
					<view class="edit-info">
						<view class="form-item">
							<view class="label">
								祝福语
							</view>
							<view class="text-area">
								<textarea class="content" maxlength="100" v-model="blessing"
									:placeholder="`在此写下你代表${selectedCompany.org_name}对党的祝福...`" />
							</view>
						</view>
						<view class="button-group">
							<button class="cu-btn bg-red" @click="submitOrgBless">提交</button>
						</view>
					</view>
				</view>
			</view>
			<view class="cu-modal bottom-modal" @click="hideModal" :class="{show:modalName=== 'areaSelector'}">
				<view class="cu-dialog" @click.stop="">
					<!-- 		<cascader-selector @clickTag="clickTag" :srvInfo="srvInfo" :order="areaOrder"
						@getCascaderValue="getCascaderValue">
					</cascader-selector> -->
					<tree-selector v-show="typeRadio==='所在地'" :srvInfo="srvInfo" @cancel="showModal('editInfo')"
						:order="areaOrder" :current="selectArea" @confirm="clickArea">
					</tree-selector>
					<tree-selector v-show="typeRadio==='家乡'" :srvInfo="srvInfo" @cancel="showModal('editInfo')"
						:order="areaOrder" :current="selectHometown" @confirm="clickHome">
					</tree-selector>
					<tree-selector v-show="typeRadio==='单位'" :srvInfo="srvInfo" @cancel="showModal('createOrg')"
						:order="areaOrder" :current="selectOrgAddr" @confirm="clickOrgAddr">
					</tree-selector>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as echarts from '@/static/echarts.js'
	const _jwx = require('jweixin-module');
	import chinaJson from '@/static/china.json'
	echarts.registerMap('china', chinaJson);
	let myChart = null
	let option
	export default {
		data() {
			return {
				onshare: false,
				areaOrder: [{
					colName: "city_code",
					orderType: "desc"
				}],
				total: 0, //活动参加人数
				modalName: "",
				wxUserInfo: "",
				typeRadio: "家乡",
				srvInfo: {
					column: 'id',
					parentCol: 'pid',
					showCol: 'name',
					isTree: true,
					serviceName: 'srvportal_city_select',
					appNo: 'bxportal'
				},
				org_name: "",
				org_addr: "",
				selectedCompany: {},
				companyList: null,
				selectArea: {},
				selectHometown: {},
				selectOrgAddr: {},
				radioList: ['所在地', '家乡', '单位'],
				// radioList: ['所在地', '家乡'],
				blessing: "", //祝福语
				cityValue: '',
				ecOption: {
					option: {}
				},
				locationInfo: {},
				result: null, //祝福记录
				lastRecord: null,
				provinceList: [],
				su: "", // share_user_no
				shareOrgNo: '', //分享单位编码
				createOrgTips: "",
				shareNum: 0,
				shareJoinNum: 0,
				orgJoinNum: 0
			}
		},
		computed: {
			noticeList() {
				if (this.wxUserInfo && (this.wxUserInfo.user_no || this.loginUserInfo.user_no)) {
					if (this.shareNum && !this.shareJoinNum) {
						return [
							`您分享的本活动已被${this.shareNum || '-'}人次浏览`
						]
					}
					if (!this.shareNum && this.shareJoinNum) {
						return [
							`已有${this.shareNum || '-'}人通过您分享的链接参加本活动`
						]
					}
					if (this.shareNum && this.shareJoinNum) {
						return [
							`您已传播${this.shareNum || '-'}人，带动${this.shareJoinNum || '-'}人次参加本活动`
						]
					}
				} else {
					return []
				}
			},
			loginUserInfo() {
				return uni.getStorageSync('login_user_info') || {}
			},
			disabledButton() {
				if (this.typeRadio === '为家乡' || this.typeRadio === '家乡') {
					if (this.selectHometown && this.selectHometown.id) {
						return false
					} else {
						return true
					}
				} else if (this.typeRadio === '所在地') {
					if (this.selectArea && this.selectArea.id) {
						return false
					} else {
						return true
					}
				} else if (this.typeRadio === '为单位' || this.typeRadio === '单位') {
					return false
				} else {
					return true
				}
			}
		},
		methods: {
			getShareNum() {
				let req = {
					"serviceName": "srvportal_share_visit_log_select",
					"colNames": ["*"],
					"condition": [{
						colName: "share_user_no",
						ruleType: 'eq',
						value: this.wxUserInfo?.user_no || this.loginUserInfo.user_no
					}],
					group: [{
						"colName": "id",
						"type": "count"
					}],
					"page": {
						"pageNo": 1,
						"rownumber": 10
					},
				}
				let url = this.getServiceUrl('bxportal', 'srvportal_share_visit_log_select', 'select');
				this.$http.post(url, req).then(res => {
					if (res.data.state === 'SUCCESS' && res.data.data.length > 0) {
						this.shareNum = res.data.data[0].id
					}
				})
			},
			getShareJoinNum() {
				let req = {
					"serviceName": "srvportal_act_atd_rcd_select",
					"colNames": ["*"],
					"condition": [{
						colName: "share_user_no",
						ruleType: 'eq',
						value: this.wxUserInfo?.user_no || this.loginUserInfo.user_no
					}],
					group: [{
						"colName": "id",
						"type": "count"
					}],
					"page": {
						"pageNo": 1,
						"rownumber": 10
					},
				}
				let url = this.getServiceUrl('bxportal', 'srvportal_act_atd_rcd_select', 'select');
				this.$http.post(url, req).then(res => {
					if (res.data.state === 'SUCCESS' && res.data.data.length > 0) {
						this.shareJoinNum = res.data.data[0].id
					}
				})
			},
			changeTypeRadio(e) {
				this.typeRadio = e
			},
			async createOrg() {
				// 创建单位
				if (!this.org_name) {
					uni.showToast({
						title: '请填写单位名称！',
						icon: 'none'
					})
					return
				}
				if (!this.selectOrgAddr || !this.selectOrgAddr.id) {
					this.createOrgTips = '请选择单位所在地区!'
					return
				}
				if (!this.org_addr) {
					this.createOrgTips = '请填写单位详细地址!'
					return
				}
				let reg =
					/[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/
				if (reg.test(this.org_name)) {
					this.createOrgTips = '单位名称中不能包含特殊字符或表情!'
					return
				}
				if (reg.test(this.org_addr)) {
					this.createOrgTips = '详细地址中不能包含特殊字符或表情!'
					return
				}
				this.createOrgTips = ''
				let req = [{
					"serviceName": "srvportal_org_mgmt_add",
					"condition": [],
					"data": [{
						"org_name": this.org_name,
						"area_id": this.selectOrgAddr.id,
						"org_addr": this.org_addr,
						"org_lng": this.locationInfo.longitude,
						"org_lat": this.locationInfo.latitude
					}]
				}]
				let url = this.getServiceUrl('bxportal', 'srvportal_org_mgmt_add', 'operate');
				let res = await this.$http.post(url, req)
				if (res.data.state === 'SUCCESS') {
					if (
						Array.isArray(res.data.response) &&
						res.data.response.length > 0 &&
						res.data.response[0].response &&
						Array.isArray(res.data.response[0].response.effect_data) &&
						res.data.response[0].response.effect_data.length > 0
					) {
						let company = res.data.response[0].response.effect_data[0]
						this.clickCompany(company)
						this.showModal('editInfo')
					}
				}
			},
			changeOnshare() {
				this.onshare = !this.onshare
			},

			async getLastRecord() {
				// 查找最后一条祝福记录
				let url = this.getServiceUrl('bxportal', 'srvportal_act_atd_rcd_select', 'select');
				let req = {
					"serviceName": "srvportal_act_atd_rcd_select",
					"colNames": ["*"],
					order: [{
						colName: "id",
						orderType: "desc"
					}],
					"page": {
						"pageNo": 1,
						"rownumber": 1
					},
				}
				let res = await this.$http.post(url, req)
				if (res.data.state === 'SUCCESS' && res.data.data.length > 0) {
					this.lastRecord = res.data.data[0]
					this.total = res.data.data[0].id
					this.setShareTitle()
				}
			},
			async getPresentResult(unionid) {
				let url = this.getServiceUrl('bxportal', 'srvportal_act_atd_rcd_select', 'select');
				let req = {
					"serviceName": "srvportal_act_atd_rcd_select",
					"colNames": ["*"],
					order: [{
						colName: "id",
						orderType: "desc"
					}],
					"condition": [{
						colName: "unionid",
						ruleType: 'eq',
						value: unionid
					}],
					"page": {
						"pageNo": 1,
						"rownumber": 1
					},
				}
				if (!unionid) {
					return
				}
				let res = await this.$http.post(url, req)
				if (res.data.state === 'SUCCESS' && res.data.data.length > 0) {
					this.result = res.data.data[0]
				}
				// this.setWXOption();
				this.getShareNum()
				this.getShareJoinNum()
			},
			async getUserInfo() {
				let url = this.$api.getUserInfo;
				let req = {
					serviceName: 'srvwx_basic_user_info_select',
					colNames: ['*'],
					condition: [{
						colName: 'app_no',
						ruleType: 'eq',
						value: this.$api.appNo.wxh5
					}]
				};
				let res = await this.$http.post(url, req);
				if (res.data.state === 'SUCCESS' && res.data.data.length > 0) {
					const userInfo = res.data.data[0];
					this.wxUserInfo = userInfo;
					this.$store.commit('setWxUser', userInfo)
					if (this.su || uni.getStorageSync('su')) {
						let share_user_no = this.su || uni.getStorageSync('su')
						if (share_user_no != userInfo.user_no) {
							this.addViewRecord()
						}
					}
					this.setWXOption();
					this.getLastRecord()
					this.getPresentResult(userInfo.unionid)
				}
			},
			async presentFlower() {
				// if (!this.locationInfo?.longitude && !this.locationInfo?.latitude) {
				// 	this.hideModal()
				// 	let result = await new Promise((resolve) => {
				// 		uni.showModal({
				// 			title: '提示',
				// 			content: '需要获取您的位置便于在地图显示次数，是否授权获取定位？',
				// 			confirmText: '授权',
				// 			cancelText: '算了',
				// 			success(res) {
				// 				if (res.confirm) {
				// 					resolve(true)
				// 				} else {
				// 					resolve(false)
				// 				}
				// 			}
				// 		})
				// 	})
				// 	if (result === true) {
				// 		let location = await this.getLocationAuth()
				// 		if (location && location.latitude) {
				// 			this.showModal('editInfo')
				// 		} else {
				// 			return false
				// 		}
				// 	}
				// }
				let userInfo = this.wxUserInfo
				let pages = getCurrentPages()
				if (userInfo && userInfo.unionid) {
					let url = this.getServiceUrl('bxportal', 'srvportal_act_atd_rcd_add', 'operate');
					let req = [{
						"serviceName": "srvportal_act_atd_rcd_add",
						"condition": [],
						"data": [{
							"act_no": "AT2106110001",
							blessing: this.blessing ? this.blessing.replace(
								/[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/ig,
								"") : '',
							"user_no": userInfo.user_no || userInfo.unionid,
							share_user_no: uni.getStorageSync('su') || this.su,
							unionid: userInfo.unionid,
							"nick_name": userInfo.nickname,
							"atd_type": this.typeRadio,
							"lng": this.locationInfo.longitude,
							"lat": this.locationInfo.latitude,
							share_url: pages[pages.length - 1].$route.fullPath,
						}]
					}]
					if (this.typeRadio === '所在地') {
						req[0].data[0].user_area_id = this.selectArea.id
						req[0].data[0].user_addr = this.selectArea.name_path || this.selectArea.name
					} else if (this.typeRadio === '家乡') {
						req[0].data[0].hometown_id = this.selectHometown.id
					} else if (this.typeRadio === '单位') {
						req[0].data[0].org_no = this.selectedCompany.org_no
						req[0].data[0].org_area_id = this.selectedCompany.area_id
						if (!this.selectedCompany?.org_no || (this.selectedCompany && this.selectedCompany.org_no &&
								this.selectedCompany.org_name !== this.org_name)) {
							this.createOrgTips = '系统未查到您输入的单位，请点击下方文字创建单位'
							return
						}
					}
					this.createOrgTips = ''
					let res = await this.$http.post(url, req)
					this.hideModal()
					if (res.data.state === 'SUCCESS') {
						if (this.typeRadio !== '单位') {
							this.org_name = ''
							this.selectedCompany = {}
							this.companyList = null
						}
						if (
							Array.isArray(res.data.response) &&
							res.data.response.length > 0 &&
							res.data.response[0].response &&
							Array.isArray(res.data.response[0].response.effect_data) &&
							res.data.response[0].response.effect_data.length > 0
						) {
							uni.showModal({
								title: '已成功提交祝福',
								showCancel: false,
								confirmText: '知道了'
							})
							this.getLastRecord()
							this.buildOption()
							this.result = res.data.response[0].response.effect_data[0]
							if (this.result.atd_type === '单位') {
								this.selectOrgInfo()
							}
						}
					} else {
						uni.showToast({
							title: res.data.resultMessage,
							icon: 'none'
						})
					}
				}
			},
			submitOrgBless() {
				if (!this.selectedCompany || (this.selectedCompany && !this.selectedCompany.id)) {
					this.hideModal()
					uni.showToast({
						title: '系统错误,请重新打开此页面或刷新后再试',
						icon: 'none'
					})
					return
				}
				if (!this.blessing) {
					this.hideModal()
					uni.showModal({
						title: '提示',
						content: '你还没有填写祝福语,确定提交?',
						confirmText: '直接提交',
						cancelText: '去填写',
						success: (res) => {
							if (res.confirm) {
								this.presentFlower()
							} else {
								this.showModal('orgModal')
							}
						}
					})
				} else {
					this.presentFlower()
				}
			},
			async getData() {
				let req = {
					"serviceName": "srvportal_city_select",
					"colNames": ["*"],
					"condition": [{
						colName: 'level',
						ruleType: 'eq',
						value: 1
					}],
					"page": {
						"pageNo": 1,
						"rownumber": 99
					},
				}
				let url = this.getServiceUrl('bxportal', 'srvportal_city_select', 'select');
				let res = await this.$http.post(url, req)
				if (Array.isArray(res.data.data) && res.data.data.length > 0) {
					// this.provinceList = res.data.data
					return res.data.data
				}
			},
			async buildOption() {
				myChart = echarts.init(document.getElementById('echarts'))
				let proData = await this.getData()
				proData = proData.map(item => {
					item.label = item.name
					item.name = item.name.replace('省', '').replace('市', '')
					return item
				})

				var geoCoordMap = {
					// "陕西": [109.1162, 34.2004]
				};
				let obj = {}
				proData.forEach(item => {
					obj[item.name] = [item.lng, item.lat]
				})
				geoCoordMap = obj
				var data = [{
					name: "陕西",
					value: 80
				}];
				data = proData.map(item => {
					let obj = {}
					obj.name = item.name
					obj.value = item.total_count || 0
					return obj
				}).filter(item => item.value)
				var max = 480,
					min = 9; // todo 
				var maxSize4Pin = 100,
					minSize4Pin = 20;

				var convertData = function(data) {
					var res = [];
					for (var i = 0; i < data.length; i++) {
						var geoCoord = geoCoordMap[data[i].name];
						if (geoCoord) {
							res.push({
								name: data[i].name,
								value: geoCoord.concat(data[i].value)
							});
						}
					}
					return res;
				};

				option = {
					tooltip: {
						trigger: 'item',
						formatter: function(params) {
							if (typeof(params.value)[2] == "undefined") {
								return params.name + ' : ' + params.value;
							} else {
								return params.name + ' : ' + params.value[2];
							}
						}
					},
					legend: {
						orient: 'vertical',
						y: 'bottom',
						x: 'right',
						data: ['pm2.5'],
						textStyle: {
							color: '#fff'
						}
					},
					visualMap: {
						show: false,
						min: 0,
						max: 100000,
						left: 'left',
						top: 'bottom',
						text: ['高', '低'], // 文本，默认为数值文本
						calculable: true,
						seriesIndex: [1],
						inRange: {},
						pieces: [{
								gt: 10000,
								label: ">10000人次",
								color: "#5B1113"
							}, {
								gte: 1000,
								lte: 10000,
								label: "1000 - 10000人次",
								color: "#A71F22"
							}, {
								gte: 100,
								lt: 1000,
								label: "100 - 1000人次",
								color: "#f72c33"
							}, {
								gte: 30,
								lt: 100,
								label: "1 - 100人次",
								color: "#ff3d3d"
							},
							{
								gte: 1,
								lt: 30,
								label: "1 - 100人次",
								color: "#e14e4e"
							},

							{
								value: 0,
								color: "#ffffff"
							}
						],
					},
					geo: {
						top: 0,
						bottom: 30,
						map: 'china',
						show: true,
						roam: true,
						label: {
							normal: {
								show: false
							},
							emphasis: {
								show: false,
							}
						},
						itemStyle: {
							areaColor: '#e12c32',
							normal: {
								areaColor: '#e12c32',
								borderColor: '#8d1b1f', //线
								shadowColor: '#83191d', //外发光
								shadowBlur: 20
							},
							emphasis: {
								areaColor: '#ff3239', //悬浮区背景
							}
						}
					},
					series: [{
							symbolSize: 1,
							label: {
								normal: {
									formatter: '{b}',
									position: 'top',
									show: true
								},
								emphasis: {
									show: false
								}
							},
							itemStyle: {
								normal: {
									color: '#fff'
								}
							},
							name: 'light',
							type: 'scatter',
							coordinateSystem: 'geo',
							data: convertData(data)
						},
						{
							type: 'map',
							map: 'china',
							geoIndex: 0,
							aspectScale: 0.5, //长宽比
							showLegendSymbol: false, // 存在legend时显示
							label: {
								normal: {
									show: false
								},
								emphasis: {
									show: false,
									textStyle: {
										color: '#fff'
									}
								}
							},
							roam: true,
							itemStyle: {
								areaColor: '#e12c32',
								normal: {
									areaColor: '#e12c32',
									borderColor: '#FFFFFF',
								},
								emphasis: {
									areaColor: '#83191d'
								}
							},
							animation: false,
							data: data
						},
						{
							name: 'Top 5',
							type: 'scatter',
							coordinateSystem: 'geo',
							symbol: 'pin',
							symbolSize: [50, 50],
							label: {
								normal: {
									show: true,
									textStyle: {
										color: '#fff',
										fontSize: 9,
									},
									formatter(value) {
										return value.data.value[2]
									}
								}
							},
							itemStyle: {
								normal: {
									// color: '#ff8f45', //标志颜色
									color: '#D8BC37', //标志颜色
								}
							},
							data: convertData(data),
							showEffectOn: 'render',
							rippleEffect: {
								brushType: 'stroke'
							},
							hoverAnimation: true,
							zlevel: 1
						},
					]
				};
				this.ecOption = option
				myChart.setOption(option);
			},
			clickCompany(e) {
				this.selectedCompany = e
				this.org_name = e.org_name
				this.companyList = null
				this.shareOrgNo = e.org_no
				this.selectOrgInfo()
			},
			onInputCompany(e) {
				let cond = null
				this.createOrgTips = ''
				if (e.detail.value) {
					cond = [{
						colName: 'org_name',
						ruleType: 'like',
						value: e.detail.value
					}]
					this.selectCompany(cond)
				} else {
					this.companyList = null
				}
			},
			selectCompany(cond) {
				let url = this.getServiceUrl('bxportal', 'srvportal_org_mgmt_select', 'select');
				let req = {
					"serviceName": "srvportal_org_mgmt_select",
					"colNames": ["*"],
					"condition": cond || [],
					"page": {
						"pageNo": 1,
						"rownumber": 3
					},
				}
				this.$http.post(url, req).then(res => {
					if (Array.isArray(res.data.data)) {
						this.companyList = res.data.data
					}
				})
			},
			claerHomeInfo() {
				this.selectHometown = {
					name: ''
				}
			},
			clearAreaInfo() {
				this.selectArea = {
					name: ''
				}
			},
			clearOrgAddrInfo() {
				this.selectOrgAddr = {
					name: ''
				}
			},
			onClick(event, ownerInstance) {
				// 调用 service 层的方法
				ownerInstance.callMethod('onViewClick', {
					test: 'test'
				})
			},
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				// 监听 service 层数据变更
				myChart.setOption(newValue)
			},
			getCascaderValue(e) {
				if (e) {
					this.clickTag(e, true)
				} else {
					this.showModal('editInfo')
				}
			},
			clickOrgAddr(e) {
				if (e && e.id) {
					this.selectOrgAddr = e
					this.showModal('createOrg')
				}
			},
			clickHome(e) {
				if (e && e.id) {
					this.selectHometown = e
					this.showModal('editInfo')
					// this.setWXOption();
				}
			},
			clickArea(e) {
				if (e && e.id) {
					this.selectArea = e
					this.showModal('editInfo')
					// this.setWXOption();
				}
			},
			clickTag(e, notLeaf = false) {
				// if (e && e.id) {
				if (e && (e.is_leaf === '是' || notLeaf)) {
					if (this.typeRadio === '所在地') {
						this.selectArea = e
					} else {
						this.selectHometown = e
					}
					this.showModal('editInfo')
					// this.setWXOption();
				}
			},
			showModal(name) {
				// this.getLocationAuth()
				this.createOrgTips = ''
				this.modalName = name
			},
			hideModal() {
				this.modalName = ''
			},
			getLocationAuth() {
				return new Promise(resolve => {
					_jwx.ready(() => {
						_jwx.checkJsApi({
							jsApiList: [
								'getLocation'
							],
							success: function(res) {
								if (res.checkResult.getLocation == false) {
									alert('你的微信版本太低，不支持微信JS接口，请升级到最新的微信版本！');
									resolve(false)
									return;
								}
							}
						});
						_jwx.getLocation({
							type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
							success: function(res) {
								var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
								var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
								var speed = res.speed; // 速度，以米/每秒计
								var accuracy = res.accuracy; // 位置精度
								self.locationInfo = res
								resolve(res)
							},
							fail: () => {
								resolve(false)
							}
						});
					});
				})
			},
			setShareTitle() {
				let linkurl = window.location.href.split('#')[0]
				_jwx.ready(() => {
					_jwx.checkJsApi({
						jsApiList: [
							'getLocation'
						],
						success: function(res) {
							if (res.checkResult.getLocation == false) {
								alert('你的微信版本太低，不支持微信JS接口，请升级到最新的微信版本！');
								return;
							}
						}
					});
					_jwx.getLocation({
						type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
						success: function(res) {
							var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
							var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
							var speed = res.speed; // 速度，以米/每秒计
							var accuracy = res.accuracy; // 位置精度
							self.locationInfo = res
						}
					});
					let title = `${this.total || 0}人次已为党100周年生日接力送祝福`
					if (linkurl.indexOf('?') !== -1) {
						linkurl = linkurl.slice(0, linkurl.indexOf('?'))
					}
					linkurl = `${linkurl}?su=${this.wxUserInfo.user_no || this.wxUserInfo.unionid}`
					// if (this.result && this.result.atd_type === '单位') {
					// 	if (this.result.org_no) {
					// 		linkurl = `${linkurl}&org_no=${this.result.org_no}`
					// 	}
					// 	let org_name = this.org_name || this.selectedCompany.org_name
					// 	if (org_name) {
					// 		title = `${title}--${org_name}`
					// 	}
					// }
					if (this.shareOrgNo && this.selectedCompany) {
						if (this.selectedCompany.org_no) {
							linkurl = `${linkurl}&org_no=${this.selectedCompany.org_no}`
						}
						let org_name = this.org_name || this.selectedCompany.org_name
						if (org_name) {
							title = `${title}--${org_name}`
						}
					}
					_jwx.updateAppMessageShareData({
						//自定义“分享给朋友”及“分享到QQ”按钮的分享内容
						imgUrl: 'https://wx2.100xsys.cn/activity/static/100years.png' ||
							'https://srvms.100xsys.cn:443/file/download?fileNo=20200306184125960100', // 分享图，默认当相对路径处理，所以使用绝对路径的的话，“http://”协议前缀必须在。
						desc: `2021年7月1日是中国共产党成立100周年纪念日。2021年3月23日，中宣部介绍中国共产党成立100周年庆祝活动八项主要内容。3月24日，中宣部发布中国共产党成立100周年庆祝活动标识。4月20日，由中共中央宣传部、文化和旅游部、中国文学艺术界联合会共同举办的庆祝中国共产党成立100周年优秀舞台艺术作品展演开幕。
				2021年6月26日，庆祝中国共产党成立100周年活动新闻中心在北京梅地亚中心正式运行。6月13日，庆祝中国共产党成立100周年大会首次综合演练圆满结束`, // 摘要,如果分享到朋友圈的话，不显示摘要。
						// title: self.result && self.result.id ?
						// 	`我是第${self.result.id}个建党100周年群众祝福祝福接力参与者` :
						// 	`已有${this.total||0}人次参与建党100周年群众祝福祝福接力`, // 分享卡片标题
						title: title,
						// link:  window.location.href, // 分享出去后的链接，这里可以将链接设置为另一个页面。
						link: linkurl, // 分享出去后的链接，这里可以将链接设置为另一个页面。
						success: function() {
							// self.saveShareRecord('朋友');
						},
						cancel: function() {
							// 用户取消分享后执行的回调函数
							// //// alert('分享失败')
						}
					}); // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
					_jwx.updateTimelineShareData({
						imgUrl: 'https://wx2.100xsys.cn/activity/static/100years.png' ||
							'https://srvms.100xsys.cn:443/file/download?fileNo=20200306184125960100', // 分享图，默认当相对路径处理，所以使用绝对路径的的话，“http://”协议前缀必须在。
						desc: `2021年7月1日是中国共产党成立100周年纪念日。2021年3月23日，中宣部介绍中国共产党成立100周年庆祝活动八项主要内容。3月24日，中宣部发布中国共产党成立100周年庆祝活动标识。4月20日，由中共中央宣传部、文化和旅游部、中国文学艺术界联合会共同举办的庆祝中国共产党成立100周年优秀舞台艺术作品展演开幕。
				2021年6月26日，庆祝中国共产党成立100周年活动新闻中心在北京梅地亚中心正式运行。6月13日，庆祝中国共产党成立100周年大会首次综合演练圆满结束`, // 摘要,如果分享到朋友圈的话，不显示摘要。
						// title: self.result && self.result.id ?
						// 	`我是第${self.result.id}个建党100周年群众祝福祝福接力参与者` :
						// 	`已有${this.total||0}人次参与建党100周年群众祝福祝福接力`, // 分享卡片标题
						title: title,
						link: linkurl, // 分享出去后的链接，这里可以将链接设置为另一个页面。
						success: function() {
							// 分享成功后的回调函数
							// //// alert('分享成功')
							// self.saveShareRecord('朋友圈');
						},
						cancel: function() {
							// 用户取消分享后执行的回调函数
							// //// alert('分享失败')
						}
					});
				});
				_jwx.error(function(res) {
					console.log(res);
				});
			},
			setWXOption() {
				let linkurl = window.location.href.split('#')[0]
				let self = this
				let req = {
					serviceName: 'srvwx_app_signature_select',
					colNames: ['*'],
					condition: [{
							colName: 'app_no',
							ruleType: 'eq',
							value: this.$api.appNo.wxh5
						},
						{
							colName: 'page_url',
							ruleType: 'eq',
							value: linkurl
						}
					]
				};
				self.$http.post(self.$api.getSignature, req).then(res => {
					if (res.data.state === 'SUCCESS') {
						let resData = res.data.data[0];
						uni.setStorageSync('signatureInfo', resData);
						_jwx.config({
							debug: false, // 调试阶段建议开启
							appId: resData.appId, // APPID
							timestamp: resData.timestamp, // 时间戳timestamp
							nonceStr: resData.noncestr, // 随机数nonceStr
							signature: resData.signature, // 签名signature
							// 需要调用的方法接口
							jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData',
								'onMenuShareTimeline', 'onMenuShareAppMessage', 'checkJsApi',
								'openLocation',
								'getLocation'
							]
						});
						_jwx.ready(() => {
							self.setShareTitle()
						});
						_jwx.error(function(res) {
							console.log(res);
						});
					} else {}
				});
			},

			addViewRecord() {
				let url = this.getServiceUrl('bxportal', 'srvportal_share_visit_log_add', 'operate');
				let pages = getCurrentPages()
				let headimgurl = this.wxUserInfo.headimgurl
				if (!headimgurl && uni.getStorageSync('login_user_info') && uni.getStorageSync('login_user_info')
					.headimgurl) {
					headimgurl = uni.getStorageSync('login_user_info').headimgurl
				}
				let req = [{
					"serviceName": "srvportal_share_visit_log_add",
					"condition": [],
					"data": [{
						"act_no": "AT2106110001",
						"user_no": this.wxUserInfo.user_no,
						'share_url': pages[pages.length - 1].$route.fullPath,
						share_user_no: this.su || uni.getStorageSync('su'),
						"nick_name": this.wxUserInfo.nickname,
						"unionid": this.wxUserInfo.unionid,
						"profile_url": headimgurl
					}]
				}]
				this.$http.post(url, req)
			},
			async getOrgJoinInfo() {
				// 查找单位参与人数
				let req = {
					"serviceName": "srvportal_act_atd_rcd_select",
					"colNames": ["*"],
					group: [{
						colName: 'id',
						type: 'count'
					}],
					"condition": [{
						colName: "org_no",
						ruleType: "like",
						value: this.selectedCompany.org_no
					}]
				}
				let url = this.getServiceUrl('bxportal', 'srvportal_act_atd_rcd_select', 'select');
				this.$http.post(url, req).then(res => {
					if (res.data.state === 'SUCCESS' && res.data.data.length > 0) {
						this.orgJoinNum = res.data.data[0].id
					}
				})
			},
			async selectOrgInfo() {
				let url = this.getServiceUrl('bxportal', 'srvportal_org_mgmt_select', 'select');
				let req = {
					"serviceName": "srvportal_org_mgmt_select",
					"colNames": ["*"],
					"condition": [{
						"colName": "org_no",
						"ruleType": "eq",
						"value": this.shareOrgNo
					}],
					"page": {
						"pageNo": 1,
						"rownumber": 1
					},
				}
				const res = await this.$http.post(url, req)
				if (res.data.state === "SUCCESS" && res.data.data.length > 0) {
					this.selectedCompany = res.data.data[0]
					this.typeRadio = '单位'
					this.org_name = res.data.data[0].org_name
					// this.companyList = res.data.data
					this.setShareTitle()
					this.getOrgJoinInfo()
				}
			},
		},
		onLoad(option) {
			if (option.su) {
				this.su = option.su
				uni.setStorageSync('su', option.su)
			}
			if (option.org_no) {
				this.shareOrgNo = option.org_no
				this.selectOrgInfo()
			}
		},
		mounted() {
			if (this.$route?.query?.su) {
				this.su = this.$route.query.su
				uni.setStorageSync('su', this.$route.query.su)
			}
			this.getUserInfo()
			setTimeout(() => {
				this.buildOption()
				let su = uni.getStorageSync('su') || this.su
			}, 200)

		}
	}
</script>

<style lang="scss" scoped>
	.form-view {
		padding: 40rpx 20rpx;
		background-color: #fff;

		.tips {
			padding: 10rpx;
			text-align: center;
		}

		.cu-form-group+.cu-form-group {
			border: none;
		}
	}

	.page-wrap {
		min-height: 100vh;
		overflow-y: scroll;
		background-color: #8a1b1f;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-image: url(../../static/img/bg-bottom.png);
		position: relative;

		&.padding-top {
			padding-top: 74rpx;
		}

		.share-guide {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 99999;
			width: 100vw;
			height: 100vh;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-image: url(../../static/share-guide.jpg);
			display: flex;
			justify-content: center;
			align-items: center;

			.cu-btn {
				width: 40%;
				margin-top: 250rpx;
			}
		}

		.top-bg {
			background-image: url(../../static/img/100-top.png);
			background-size: 100%;
			width: 100vw;
			height: 300rpx;
			background-repeat: no-repeat;
			// margin-top: -20rpx;
		}

		.top-text {
			background-image: url(../../static/img/100text.png);
			// background-image: url(../../static/img/100-center-text.png);
			// background-size: 65%;
			background-size: 90%;
			background-repeat: no-repeat;
			background-position: center;
			width: 100vw;
			height: 130rpx;
			background-color: #e50012;
		}

		.join-number {
			color: #fff;
			font-size: 16px;
			text-align: center;
			min-height: 70rpx;
			background-color: #6e1618;
			padding: 10rpx;
			color: #f0a600;

			.number {
				font-size: 20px;
				font-weight: bold;
				margin: 0 10rpx;
			}
		}

		.bottom-bg {
			background-size: 100%;
			background-image: url(../../static/img/100-bottom.png);
			background-position: bottom;
			background-repeat: no-repeat;
			height: 210rpx;
			width: 100vw;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 20rpx;
			justify-content: flex-end;
			z-index: 1;
			position: absolute;
			top: 0;
			left: 0;

			.bottom-tip {
				padding: 0 20rpx;
			}
		}

		.foot-button {
			display: flex;
			position: relative;
			align-items: center;
		}

		.button {
			width: 100vw;
			height: 200rpx;
			background-repeat: no-repeat;
			background-size: 60%;
			background-position: center;
			background-image: url(../../static/img/bottom-btn.png);
			// background-image: url(../../static/img/100-button1.png);
			// position: relative;
			// bottom: 100rpx;
			z-index: 100;

			&.share-btn {
				background-image: none;
				display: flex;
				align-items: center;
				justify-content: center;
				right: 0;
				width: 80px;
				position: absolute;

				.cu-btn {
					font-size: 20px;
					margin: 0 auto;
				}
			}

			&.less-bottom {
				bottom: 30rpx;
			}
		}

		.form-input {
			border: 0.5px solid #d0d4d6;
			padding: 20rpx 40rpx;
			display: flex;
			align-items: center;
			width: 100%;

			.text {
				flex: 1;
			}
		}

		.edit-info {
			min-height: 30vh;
			padding: 30rpx;
			font-size: 16px;

			.button-group {
				text-align: center;
				padding: 20rpx;

				.cu-btn {
					width: 40%;
				}
			}

			.form-item {
				.single-row {
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					.radio-button {
						color: #333;
						background-color: #f1f1f1;
						border: 1px solid #666;
						padding: 2px 15px;
						border-radius: 25px;
						transition: all 0.5s;
						margin-right: 10rpx;

						&.active {
							border-color: #0bc99d;
							color: #0bc99d;
							background-color: rgba(11, 201, 157, 0.1);
						}
					}
				}

				.text-area {
					border: 1px solid #d0d4d6;
					height: 200rpx;
					overflow-y: scroll;

					.content {
						width: 100%;
						padding: 20rpx;

						.uni-input-placeholder,
						.uni-textarea-placeholder {
							padding: 0 10rpx;
							height: auto;
						}
					}
				}
			}

			.label {
				padding: 10rpx 0;
			}
		}
	}

	.create-org {
		text-align: center;
		font-size: 28rpx;
		// font-weight: bold;
		padding: 10rpx;
		position: relative;

		&::after {
			content: "";
			width: 60%;
			height: 2px;
			background-color: #f37b1d;
			position: absolute;
			bottom: -6rpx;
			left: 20%;
		}
	}

	.company-list {
		padding: 20rpx;
		margin: 10rpx 20rpx;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);

		&+.company-list {
			margin-top: 0;
		}

		.company-item {
			text-align: center;
			padding: 20rpx;
			border-bottom: 1px solid #d0d4d6;

			&:last-child {
				border-bottom: none;
				padding-bottom: 0;
			}
		}
	}

	.e-charts {
		width: 100%;
		height: 600rpx;
		margin-top: -20rpx;

		.uni-ec-charts {
			width: 100%;
			height: 100%;
		}
	}

	.button-box {
		padding: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 30px;
	}
</style>
